import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入vuex模块
import store from '@/store/index.js'
// import Main from '@/views/Main/Main.vue'
const Main = () => import('@/views/Main/Main.vue')
// import Home from '@/views/Main/Home.vue'
const Home = () => import('@/views/Main/Home.vue')
// import User from '@/views/Main/User.vue'
const User = () => import('@/views/Main/User.vue')
// import Search from '@/views/Search/Search.vue'
const Search = () => import('@/views/Search/Search.vue')
// import SearchResult from '@/views/Search/SearchResult.vue'
const SearchResult = () => import('@/views/Search/SearchResult.vue')
// import ArticleDetail from '@/views/ArticleDetail/ArticleDetail.vue'
const ArticleDetail = () => import('@/views/ArticleDetail/ArticleDetail.vue')
// import UserEdit from '@/views/UserEdit/UserEdit.vue'
const UserEdit = () => import('@/views/UserEdit/UserEdit.vue')
// import Chat from '@/views/Chat/Chat.vue'
const Chat = () => import('@/views/Chat/Chat.vue')
// const store = () => import('@/views/Login/Login.vue')

// 导入登录的组件页面
// import Login from '../views/Login/Login.vue'
const Login = () => import('@/views/Login/Login.vue')

// 解决vue-router报错
// 1. 将 VueRouter 本身提供的 $router.push 方法转存到常量中
const originalPush = VueRouter.prototype.push
// 2. 自定义 $router.push 方法，在内部调用原生的 originalPush 方法进行路由跳转；并通过 .catch 捕获错误
VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  // 通过 .catch 捕获错误
  return originalPush.call(this, location).catch(err => err)
}
Vue.use(VueRouter)

const routes = [
  // 带有name属性的路由规则，叫做命名路由
  {
    path: '/login',
    component: Login,
    name: 'login'
  },
  {
    path: '/',
    component: Main,
    // 如果通过children 加载了默认子路由 则父路由规则不需要加name
    // name: 'main',
    children: [
      {
        // 子路由规则，path为空字符串的子路由规则，叫做默认子路由
        path: '',
        component: Home,

        name: 'home',
        meta: { isRecord: true, top: 0 }
      },
      {
        // 子路由规则不建议以/开头
        path: 'user',
        component: User,
        name: 'user'
      }
    ]
  },
  {
    path: '/search',
    component: Search,
    name: 'search'
  },
  {
    path: '/search/:kw',
    component: SearchResult,
    name: 'search-result',
    // 为当前路由开启props传参，成功后可以在component指向的组件中，通过porps来接收路由参数
    props: true,
    meta: { isRecord: true, top: 0 }
  },
  {
    path: '/article/:id',
    component: ArticleDetail,
    name: 'art-detail',
    props: true,
    meta: { isRecord: true, top: 0 }
  },
  // 编辑用户信息的路由规则
  {
    path: '/user/edit',
    component: UserEdit,
    name: 'user-edit'
  },
  {
    path: '/chat',
    component: Chat,
    name: 'chat'
  }
]

const router = new VueRouter({
  routes
})

// 挂载前置导航守卫
router.beforeEach((to, from, next) => {
  // 判断用户访问的path地址是否为/user 或 /user/edit
  // 如果是，应该判断用户是否登录了
  // 从vuex中读取token值 如果有值，证明登录了，放行
  // 如果没有token的值 证明没有登录，强制用户跳转登录页
  if (to.path === '/user' || to.path === '/user/edit') {
    // 访问有权限的页面，判断用户是否登录了
    const tokenStr = store.state.tokenInfo.token
    if (tokenStr) {
      // 有token，放行
      next()
    } else {
      // 要访问有权限的页面，但没有登录，强制跳转到登录页面
      next('/login?pre=' + to.fullPath)
    }
  } else {
    // 访问不需要权限的页面，直接放行
    next()
  }
})
// 挂载全局后置导航守卫
router.afterEach((to, from) => {
  if (to.meta.isRecord) {
    // 证明to这个路由保存了元信息
    // setTimeout(function () {
    //   window.scrollTo(0, to.meta.top)
    // }, 0)
    Vue.nextTick(function () {
      window.scrollTo(0, to.meta.top)
    })
  }
})

export default router
